// 标题栏
<template>
  <div id="title-bar">
    <div class="top-stretch" :style="stretchStyle"></div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="window-control">
      <div class="minimize" @click="minimize">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-heng"></use>
        </svg>
      </div>
      <div class="maximize" @click="maximize">
        <svg class="icon" aria-hidden="true">
          <!-- 不支持 maxiIconTypes[isMaximized] -->
          <use :xlink:href="maxiIcon"></use>
        </svg>
      </div>
      <div class="close" @click="windowClose">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-cha1"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core'
import { ipcRenderer, IpcRendererEvent } from 'electron'

export default defineComponent({
  data() {
    return {
      isMaximized: false,
      maxiIcon: '#icon-ic_box',
      maxiIconTypes: Object.freeze(['#icon-ic_box', '#icon-chuangkou']),
      stretchStyle: {
        height: '2px'
      }
    }
  },
  created() {
    console.log('title-bar created')
    this.listenMaximize()
  },
  methods: {
    // 监听窗口最大化
    listenMaximize() {
      ipcRenderer.on('maximize', (event: IpcRendererEvent, args) => {
        this.isMaximized = true
        this.maxiIcon = this.maxiIconTypes[1]
        this.stretchStyle.height = '0'
      })
      ipcRenderer.on('unmaximize', (event: IpcRendererEvent, args) => {
        this.isMaximized = false
        this.maxiIcon = this.maxiIconTypes[0]
        this.stretchStyle.height = '2px'
      })
    },
    // 最小化窗口
    minimize() {
      ipcRenderer.sendSync('minimize')
    },
    // 最大化窗口
    maximize() {
      if (this.isMaximized) {
        if (ipcRenderer.sendSync('unmaximize')) {
          this.isMaximized = false
          this.maxiIcon = this.maxiIconTypes[0]
        }
        return
      }
      if (ipcRenderer.sendSync('maximize')) {
        this.isMaximized = true
        this.maxiIcon = this.maxiIconTypes[1]
      }
    },
    // 关闭窗口
    windowClose() {
      ipcRenderer.sendSync('close')
    }
  }
})
</script>

<style lang="stylus" scoped>
#title-bar
  position fixed
  top 0
  // left 0
  width 100%
  height 27px
  background-color #ffeea5
  -webkit-user-select none
  -webkit-app-region drag
  overflow hidden
  >div.top-stretch
    height 2px
    // background-color red
    -webkit-app-region no-drag
    &:hover
      cursor n-resize
  >div.content
  >div.window-control
    position relative
    top -2px
  >div.content
    // background-color grey
    float left
    height 100%
  >div.window-control
    overflow hidden
    -webkit-app-region no-drag
    float right
    display flex
    >div
      -webkit-app-region no-drag
      padding 5px 17px
      svg
        font-size 13px
      &:hover
        background-color #d3d3d3
    div.close
      svg
        font-size 12px
        margin-bottom 1px
      &:hover
        background-color #ff5a5a
        color white
</style>